<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>markdown文档管理系统</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			table {
				width: 100%;
				/*表格宽度*/
				max-width: 65em;
				/*表格最大宽度，避免表格过宽*/
				border: 1px solid #dedede;
				/*表格外边框设置*/
				margin: 15px auto;
				/*外边距*/
				border-collapse: collapse;
				/*使用单一线条的边框*/
				empty-cells: show;
				/*单元格无内容依旧绘制边框*/
			}
			
			table th,
			table td {
				height: 35px;
				/*统一每一行的默认高度*/
				border: 1px solid #dedede;
				/*内部边框样式*/
				padding: 0 10px;
				/*内边距*/
			}
		</style>
	</head>

	<body>
		<header></header>
		<div id="doc" class="container"></div>
		<footer></footer>
		<script type="text/javascript" src="js/jquery-2.2.3.js"></script>
		<script type="text/javascript" src="js/showdown.js"></script>
		<script type="text/javascript" src="js/showdown-toc.js"></script>
		<script src="js/raphael.js" type="text/javascript"></script>
		<script src="js/flowchart.js" type="text/javascript"></script>

		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script>
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg); //匹配目标参数
				if (r != null) return unescape(r[2]);
				return null; //返回参数值
			}

			function drawflowchart(code, context) {
				var chart = flowchart.parse(code);
				chart.drawSVG(context, {
					// 'x': 30,
					// 'y': 50,
					'line-width': 3,
					'line-length': 50,
					'text-margin': 10,
					'font-size': 14,
					'font': 'normal',
					'font-family': 'Helvetica',
					'font-weight': 'normal',
					'font-color': 'black',
					'line-color': 'black',
					'element-color': 'black',
					'fill': 'white',
					'yes-text': 'yes',
					'no-text': 'no',
					'arrow-end': 'block',
					'scale': 1,
					'symbols': {
						'start': {
							'font-color': 'red',
							'element-color': 'green',
							'fill': 'yellow'
						},
						'end': {
							'class': 'end-element'
						}
					},
					'flowstate': {
						'past': {
							'fill': '#CCCCCC',
							'font-size': 12
						},
						'current': {
							'fill': 'yellow',
							'font-color': 'red',
							'font-weight': 'bold'
						},
						'future': {
							'fill': '#FFFF99'
						},
						'request': {
							'fill': 'blue'
						},
						'invalid': {
							'fill': '#444444'
						},
						'approved': {
							'fill': '#58C4A3',
							'font-size': 12,
							'yes-text': 'APPROVED',
							'no-text': 'n/a'
						},
						'yes': {
							'fill': '#58C4A3',
							'font-size': 12,
							'yes-text': 'yes',
							'no-text': 'no'
						},
						'rejected': {
							'fill': '#C45879',
							'font-size': 12,
							'yes-text': 'n/a',
							'no-text': 'REJECTED'
						}
					}
				});
			}
			var flowchartoption = {
				// 'x': 30,
				// 'y': 50,
				'line-width': 3,
				'line-length': 50,
				'text-margin': 10,
				'font-size': 14,
				'font': 'normal',
				'font-family': 'Helvetica',
				'font-weight': 'normal',
				'font-color': 'black',
				'line-color': 'black',
				'element-color': 'black',
				'fill': 'white',
				'yes-text': 'yes',
				'no-text': 'no',
				'arrow-end': 'block',
				'scale': 1,
				'symbols': {
					'start': {
						'font-color': 'red',
						'element-color': 'green',
						'fill': 'yellow'
					},
					'end': {
						'class': 'end-element'
					}
				},
				'flowstate': {
					'past': {
						'fill': '#CCCCCC',
						'font-size': 12
					},
					'current': {
						'fill': 'yellow',
						'font-color': 'red',
						'font-weight': 'bold'
					},
					'future': {
						'fill': '#FFFF99'
					},
					'request': {
						'fill': 'blue'
					},
					'invalid': {
						'fill': '#444444'
					},
					'approved': {
						'fill': '#58C4A3',
						'font-size': 12,
						'yes-text': 'APPROVED',
						'no-text': 'n/a'
					},
					'yesorno': {
						'fill': '#58C4A3',
						'font-size': 12,
						'yes-text': 'yes',
						'no-text': 'no'
					},
					'rejected': {
						'fill': '#C45879',
						'font-size': 12,
						'yes-text': 'n/a',
						'no-text': 'REJECTED'
					}
				}
			};
			$(function() {
				var filename = getUrlParam('file');
				if (filename == undefined || filename == null || filename == '') {
					filename = "index";
				}
				$.ajax({
					url: "docs/" + filename + ".md",
					success: function(data) {
						var converter = new showdown.Converter({
							extensions: ['toc'],
							'tasklists': true,
							'tables': true
						});
						$("#doc").html(converter.makeHtml(data));
						$('.flowchart').flowChart(flowchartoption);
						//						$('.flowchart').each(function(i, obj) {
						//							drawflowchart(obj.innerHtml,obj);
						//						});
					}
				});
				//hljs.initHighlighting();
			});
		</script>
	</body>

</html>